<template>
	<view>
		  <web-view :webview-styles="webviewStyles" src="http://pt.91zjj.cn/addons/aa.html"></web-view>
		  
		<view class="text_box">
			<navigator url="" class="title">520为爱表白</navigator>
			<navigator url="" class="titlesm" @click="open('tnav')">这一天，我想对你说我爱你!</navigator>
		</view>
		<navigator url="">
			<image src="../../static/images/l1.png" mode="widthFix" @click="open('timg')"></image>		
		</navigator>
		<navigator url="" class="ttitle">我们的爱</navigator>		
		<view class="flex">
			<view>
				<image src="../../static/images/1.png" mode="widthFix"></image>
				<navigator url="">我们的时光</navigator>
				<text @click="open('ttext')">{{text1}}</text>
			</view>
			<view>
				<image src="../../static/images/1.png" mode="widthFix"></image>
				<navigator url="">我们的时光</navigator>
				<text>我们会随着时光一起变老</text>
			</view>
			<view>
				<image src="../../static/images/1.png" mode="widthFix"></image>
				<navigator url="">我们的时光</navigator>
				<text>我们会随着时光一起变老</text>
			</view>
			<view>
				<image src="../../static/images/1.png" mode="widthFix"></image>
				<navigator url="">我们的时光</navigator>
				<text>我们会随着时光一起变老</text>
			</view>
		</view>
		<video src="" @click="open('tvideo')"></video>
		
		<!-- 过渡 -->
		<uni-transition :duration="500" :mode-class="modeClass" :styles="transfromClass"  :show="transShow" >
			<!-- 遮罩 -->
			<uni-transition :mode-class="['fade']" :styles="maskClass" :show="show" @click="onTap" />
			<view class="box">
				<view class="box_title">
					<text v-if="trantype != 'tvideo'">内容修改 </text>
					<text v-if="trantype == 'tvideo'">链接修改 </text>
					<text @click="onTap">&#10006;</text>
				</view>
				<view class="box_input" v-if="trantype== 'ttext'">
					<!-- <input type="text" :value="text1" v-model="change1" placeholder="请输入内容"/> -->
				</view>
				<view v-if="trantype== 'tnav'">
					<view class="box_inputs">
						<text>内容：</text>
						<input type="text" placeholder="请输入内容"/>
					</view>
					<view class="box_inputs">
						<text>链接：</text>
						<input type="text" placeholder="请输入链接"/>
					</view>
				</view>
				<view v-if="trantype== 'timg'">					
					<view class="box_inputs">
						<text>链接：</text>
						<input type="text" placeholder="请输入链接"/>
					</view>
					<view class="box_inputs">
						<text>图片：</text>
						<image :src="timage" :data-src="timage" @tap="chooseImage"></image>
					</view>
				</view>
				<view class="box_input" v-if="trantype== 'tvideo'">
					<input type="text" placeholder="请输入链接"/>
				</view>
				<view class="box_btn">
					<view @click="onTap">取消</view>
					<view @click="onChange">确定</view>
				</view>
			</view>
		</uni-transition>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 弹出框
				show: false,
				transShow: false,
				modeClass: ['fade'],
				maskClass: {
					'position': 'fixed',
					'bottom': 0,
					'top': 0,
					'left': 0,
					'right': 0,
					'background-color': 'rgba(0, 0, 0, 0.4)'
				},
				transfromClass: {
					'position': 'fixed',
					'bottom': 0,
					'top': 0,
					'left': 0,
					'right': 0,
					'display': 'flex',
					'justify-content': 'center',
					'align-items': 'center'
				},
				trantype:'',
				change1:'',
				text1:'我们会随着时光一起变老',
				timage:''
			}
		},
		
		onReady() {
		
		},
		methods: {
			// select(e){
			// 	console.log(e)
			// },
			// 弹出框
			open(ttype) {
				this.transShow = !this.transShow
				this.show = true,
				this.trantype = ttype
				this.change1 = this.text1
			},
			// 关闭框
			onTap() {
				this.transShow = this.show = false
			},
			onChange(){
				this.transShow = this.show = false,
				this.text1 = this.change1
			},
			chooseImage: function() {
				uni.chooseImage({
					count: 1, //默认9

					success: function (res) {
						// console.log(JSON.stringify(res.tempFilePaths));
						this.timage = JSON.stringify(res.tempFilePaths)
						console.log(this.timage)
					}
				})
			}
		}
	}
</script>

<style>
page{
	background: #fa8689;
	color: #fff;
}
image{
	width: 100%;
}
video{
	width: 100vw;
	height: 300rpx;
}
.text_box{
	width: 100vw;
	text-align: center;	
	padding: 100rpx 0 20rpx;
}
.text_box .title{
	font-size: 50rpx;
	font-weight: bold;
	margin-bottom: 30rpx;
}
.ttitle{
	padding: 30rpx 0 20rpx;
	text-align: center;
	font-size: 35rpx;
}
.flex{
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}
.flex>view{
	width: 45vw;
	text-align: center;
	margin: 10rpx 0;
	line-height: 50rpx;
}
.box{
	width: 90vw;	
	background: #fff;
	border-radius: 10rpx;
	color: #555;	
	position: relative;
}
.box_title{
	line-height: 40rpx;
	font-size: 30rpx;
	display: flex;
	justify-content: space-between;
	padding: 20rpx;
}
.box_title text{
	font-size: 35rpx;
}
.box_input,.box_inputs{
	padding: 40rpx 20rpx;
	border-bottom:1px solid #eee;
	display: flex;
}
.box_input input{
	width: 100%;
	line-height: 50rpx;
	border: 0;
}
.box_inputs text{
	width: 20%;
}
.box_inputs input{
	width: 80%;
	line-height: 50rpx;
	border: 0;
}
.box_inputs image{
	width: 150rpx;
	height: 150rpx;
	opacity: 1;
}
.box_btn{
	line-height: 100rpx;
	display: flex;
}
.box_btn view{
	width: 50%;
	text-align: center;
}
.box_btn view:last-of-type{
	border-left: 1px solid #eee;
	color: blue;
}
</style>
